<template>
  <bread>
    <bread-item to="/">首页</bread-item>
    <bread-item :key="category.top.id" v-if="category.top" :to="`/category/${category.top.id}`">{{ category.top.name }}
    </bread-item>
    <Transition name="fade-right" mode="out-in" :key="category.sub?.id" appear>
      <bread-item v-if="category.sub">{{ category.sub.name }}</bread-item>
    </Transition>
  </bread>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const store = useStore()
const route = useRoute()
console.log(route);
const category = computed(() => {
  const cate = {}
  store.state.category.list.forEach(top => {
    if (top.children) {
      const sub = top.children.find(sub => sub.id === route.params.id)
      if (sub) {
        cate.top = { id: top.id, name: top.name }
        cate.sub = { id: sub.id, name: sub.name }
      }
    }
  });

  return cate
})

</script>

<style lang="less" scoped>
</style>
